<template>
  <div>
    <page-list :x-uri="uri" :x-tabs="tabs" :custom-components="custom" :doactions="doactions" :checkbox-item="false">
      <!-- 页面操作按钮 -->
      <template v-slot:page-button>
        <el-dropdown class="import-student" trigger="click" @command="menuClick">
          <el-button size="mini" type="primary">
            导入学员
            <i class="el-icon-arrow-down el-icon--right" />
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="importVisible">导入附件</el-dropdown-item>
            <el-dropdown-item command="download">下载模板</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button size="mini" type="primary" @click="visible = true">添加学员</el-button>
      </template>
    </page-list>
    <add-student :visible.sync="visible" :course-id="$route.params.id" />
    <import-student :visible.sync="importVisible" :course-id="$route.params.id" />
  </div>
</template>

<script>
import PageList from '@public/template/page_list.vue';
import ImportStudent from '@/pages/course/student/import_student.vue';
import AddStudent from '@/pages/course/student/add_student';
import User from '@/pages/user/student/account/components/user.vue';
import StudyStatus from '@/pages/course/video/student/components/study_status.vue';
import CreateTime from '@/pages/course/video/student/components/create_time';
export default {
  components: {
    PageList,
    AddStudent,
    ImportStudent
  },
  inject: ['reload'],
  data() {
    return {
      uri: 'course/admin/live/' + this.$route.params.id + '/student/list',
      tabs: [
        {
          title: '大班课',
          uri: '/course/live/list',
          meta: {
            permission: 'course.live.large'
          }
        },
        {
          title: '大班课-学员',
          uri: '/course/live/' + this.$route.params.id + '/student'
        }
      ],
      custom: {
        user: User,
        study_status: StudyStatus,
        create_time: CreateTime
      },
      visible: false,
      importVisible: false,
      doactions: [
        {
          title: '详情',
          callback: this.info,
          display: ({ row }) => {
            return row.learn_section_count > 0;
          }
        },
        { title: '移除', callback: this.delete }
      ]
    };
  },
  methods: {
    // 详情
    info: function({ row }) {
      this.$router.push({ path: '/course/live/' + this.$route.params.id + '/student/' + row.user_id + '/info' });
    },
    delete: function({ row }) {
      this.$box
        .confirm('确认移除吗')
        .then(() => {
          this.$http.delete(
            '/course/admin/live/' + this.$route.params.id + '/student/' + row.user_id + '/delete',
            {},
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    },
    menuClick: function(command) {
      if (command == 'download') {
        window.open('/template/excel/导入课程学员模板.xlsx', '_blank');
      } else {
        this.importVisible = true;
      }
    }
  }
};
</script>

<style scoped>
.import-student {
  margin-right: 20px;
}
</style>
